<template>
  <div>
    <v-charts :options="options"  style="width:100%;height:400px" autoresize />
  </div>
</template>

<script>
import ECharts from 'vue-echarts/components/ECharts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/polar'
import 'echarts/lib/component/title.js'
import { getAction } from '@api/manage'

export default {
  name: 'threeYearTotalClasstime',
  components:{
    'v-charts': ECharts
  },
  props:{
    date: {
      type: String,
      default: () => []
    },
  },
  data() {
    return {
      url:{
        list:""
      },
      options: {
        title: {
          textAlign: 'center',
          x:'center',
          y:'top',
          text: '分院教师课时量排名前30'
        },
        tooltip:{},
        legend:{
          y:'bottom',
          data:['2020年','2021年']
        },
        xAxis:{
          data:["A","B","C","D","E","F"]
        },
        yAxis:[
          {
            name:'总课时量',
            type:'value',
            min:0
          }
        ],
        series:[{
          name: '2019',
          type: 'bar',
          data:[5,20,36,10,90,20]
        },{
          name: '2020',
          type: 'bar',
          data:[5,20,36,10,90,20]
        },{
          name: '2021',
          type: 'bar',
          data:[5,20,36,10,10,150]
        }]
      }
    }
  },
  created() {
    this.loadData();
  },
  watch:{
    date:function(){
      console.log(this.date)
    }
  },
  methods:{
    loadData(){
      let yearNum = parseInt(this.date);
      this.options.legend.data = [(yearNum-2).toString(),(yearNum-1).toString(),(yearNum).toString()];
      this.loadDepart()
      this.loadClasstime()
    },
    loadDepart(){
      this.options.xAxis.data = ["A","B","C","D","E","F"]
    },
    loadClasstime(){
      getAction(this.url.list, { date: this.date}).then((res) => {
        if (res.success) {
          console.log(res);
        }
        if(res.code===510){
          this.$message.warning(res.message)
        }
        this.loading = false;
      })
    }
  }
}
</script>

<style scoped>

</style>